<template>
  <div class="post-list">
    <div class="post-item card" v-for="(item, index) in postList" :key="index">
      <h4
        title="塞班贵？一定是你的打开方式不对！6000块玩转塞班"
        class="post-title"
      >
        <a href="#">塞班贵？一定是你的打开方式不对！6000块玩转塞班</a>
      </h4>

      <p class="post-desc">
        <a href="#">
          大家对塞班岛总存在着这样的误解，知道它是美属地盘，就理所当然地觉得这里的花费一定很高，花费高有高的玩法，那如果只有6000块的预算呢？要怎么玩？关于旅行这件事，我们要让钱花得更有道理，收下这份攻略，带你6000块花式玩转塞班。图：塞班岛。
          by第5季旅游一、怎样用6000块玩转塞班？大多数出境游客人不做预算或最终花费远远超出预算，对预算的合理分配对控制我们旅行的花费就很重要了，如何只花6000块玩转塞班岛，对预算超支say
          no？下面从5个方面来为您一一解读：机票+酒店、岛上交通、玩乐项目、吃以及购买纪念品。1.怎样订机票+酒店性价比最高？机票和酒店的花销往往会占据我们旅行大半的花销，假设机票酒店为塞班行预算的一半，剩下的吃行玩购为预算的另一半，如果能在机票酒店这部分省下钱，也就意味着在塞班岛用来吃行玩购的钱就增加了怎样去塞班？可以转机也可以直飞，转机大多会从韩国转，提前蹲守能买到韩国飞塞班的特价机票，2000以下就能入手，加上国内飞韩国的机票来回塞班得5000+，还没算上在塞班的住宿费用，转机还有中途等待的时间，光花在路途上的时间就比直飞要多上一倍甚至更多，转乘奔波劳累，非联程票还要担心行李托运问题，所以建议大家有直飞还是尽量选择直飞。在酒店上，旅途中我们呆在酒店的时间远比在外游玩的时间少，酒店干净整洁基本就能满足我们休息的需求，塞班不是个享受酒店的地方而且还真不能跟国内星级酒店等位比较，所以不建议大家花过多的钱在塞班的酒店体验上。怎样在机票酒店上获得最高性价比的体验？
          直飞塞班的航班一般和酒店一起打包成机票+酒店套餐，价格要比单定机票、酒店要更加便捷实惠，往往3千多就能把机票和酒店一键搞定。
        </a>
      </p>

      <el-row
        class="card-images"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <a href="#">
          <img
            src="https://n3-q.mafengwo.net/s10/M00/E8/E4/wKgBZ1octoCABhgLAAafahORRLs91.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90"
            alt=""
          />
        </a>
        <a href="#">
          <img
            src="https://n3-q.mafengwo.net/s10/M00/E8/E4/wKgBZ1octoCABhgLAAafahORRLs91.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90"
            alt=""
          />
        </a>
        <a href="#">
          <img
            src="https://n3-q.mafengwo.net/s10/M00/E8/E4/wKgBZ1octoCABhgLAAafahORRLs91.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90"
            alt=""
          />
        </a>
      </el-row>

      <el-row class="post-info" type="flex" justify="space-between">
        <el-row class="post-info-left" type="flex" align="middle">
          <span>
            <i class="el-icon-location-outline"></i>
            北京市
          </span>
          <el-row class="post-user" type="flex" align="middle">
            by
            <a href="#"
              ><img
                src="http://157.122.54.189:9095/assets/images/avatar.jpg"
                alt=""
              />
            </a>
            <a href="#">地球发动机</a>
          </el-row>
          <span>
            <i class="el-icon-view"></i>
            14592
          </span>
        </el-row>
        <span class="post-info-right">79👍</span>
      </el-row>
    </div>

    <el-row class="post-item" type="flex" justify="justify" align="middle">
      <div class="post-cover" align="middle">
        <a href="#">
          <img
            src="https://p3-q.mafengwo.net/s13/M00/41/C4/wKgEaVyaOs2AA9IKAAj8Lg2YzaU64.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90"
            alt=""
          />
        </a>
      </div>

      <div class="post-content">
        <h4
          title="远东行：用好奇心打量这座城 —— 最值得收藏的海参崴出行攻略"
          class="post-title"
        >
          <a href="#">
            远东行：用好奇心打量这座城 —— 最值得收藏的海参崴出行攻略
          </a>
        </h4>

        <p class="post-desc">
          <a href="#">
            想象一下一个距离 北京 只有2.5小时飞行距离的城市：身处 亚洲
            却能感受到十足的欧陆风情——欧式建筑和街道，金发碧眼的路人，正宗的西餐外加只有国内一半售价的帝王蟹可以敞开吃——更难能可贵的是，这里对国人（实质）免签，有直飞航班，低廉的物价，且尚未有太多的游客涉足还保留着原汁原味的传统风情！
          </a>
        </p>

        <el-row class="post-info" type="flex" justify="space-between">
          <el-row class="post-info-left" type="flex" align="middle">
            <span>
              <i class="el-icon-location-outline"></i>
              北京市
            </span>
            <el-row class="post-user" type="flex" align="middle">
              by
              <a href="#"
                ><img
                  src="http://157.122.54.189:9095/assets/images/avatar.jpg"
                  alt=""
                />
              </a>
              <a href="#">地球发动机</a>
            </el-row>
            <span>
              <i class="el-icon-view"></i>
              14592
            </span>
          </el-row>
          <span class="post-info-right">79👍</span>
        </el-row>
      </div>
    </el-row>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      postList: [],
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        // 默认显示第几页
        pagenum: 1,
        // 默认显示多少条数据
        pagesize: 2
      },
      // 总数据条数
      total: 0
    };
  },
  created() {
    this.$axios({
      url: "/posts"
    }).then(res => {
      // console.log(res.data);
      this.postList = res.data.data;
      console.log(this.postList);
    });
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {}
  }
};
</script>

<style lang="less" scoped>
.post-list {
  width: 700px;
  // overflow: hidden;
  .post-item {
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
  }
  .post-cover {
    width: 220px;
    height: 150px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 10px;
    img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
  .post-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 18px;

    a:hover {
      color: orange;
    }
  }
  .post-desc {
    margin-bottom: 15px;
    line-height: 1.5;
    font-size: 14px;
    height: 63px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    a {
      color: #666;
    }
  }

  .card-images {
    margin: 15px 0;
    img {
      width: 220px;
      height: 150px;
      display: block;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }

  .post-info {
    .post-info-left {
      font-size: 12px;
      color: #999;
      > * {
        margin-right: 10px;
      }
      i {
      }
      .post-user {
        a {
          color: orange;
        }
        img {
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 100px;
          margin: 5px;
        }
      }
    }
    .post-info-right {
      color: orange;
    }
  }

  .post-content {
    flex: 1;
    width: 470px;
  }
}
</style>
